<template>
  <view class="container" :style="'background-image: url('+$xyfun.image('/static/personalcenter/background.png')+');'" v-if="!isLoading">
    <view class="personalcenter" @tap="toMy" :style="'padding-top:'+paddingTop+'rpx'">
      <view class="top">
        <view class="page_tit">我的</view>
        <text class="yz-iconfont yz-xitongshezhi"></text>
      </view>
      <view class="individual_box">
        <image :src="$xyfun.image(userinfo.avatar)" v-if="userinfo && userinfo.avatar"></image>
        <image :src="$xyfun.image('/static/other/avatar.png')" v-else></image>
        <view class="ib_box">
          <view class="name" v-if="user.isLogin">{{userinfo.nickname}}</view>
          <view class="mobile" v-if="user.isLogin">{{userinfo.mobile}}</view>
          <view class="name" v-else>未登录</view>
          <view class="view">点击查看个人主页<text class="yz-iconfont yz-jiantou"></text></view>
        </view>
      </view>
    </view>

    <image class="member_box" mode="widthFix" :src="$xyfun.image('/static/personalcenter/member.png')"></image>

    <view class="usercenter_box">
      <view class="uo_box">
        <view class="user">{{common.auditConfig.user_student}}</view>
      </view>

      <view class="uso_box">
        <view class="ub_box" @tap="$xyfun.to('/pages/user/order')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/page.png')"></image>
          <view class="ub_tit">普通订单</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/job/quickly_push')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/collection.png')"></image>
          <view class="ub_tit">急招订单</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/coupons')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/triallessons.png')"></image>
          <view class="ub_tit">试课券包</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/teacher')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/teacher.png')"></image>
          <view class="ub_tit" v-if="common.auditConfig.audit_on==0">我的老师</view>
          <view class="ub_tit" v-if="common.auditConfig.audit_on==1">我的培训班</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/collect')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/collection.png')"></image>
          <view class="ub_tit">我的收藏</view>
        </view>
      </view>
    </view>

    <view class="usercenter_box" v-if="common.auditConfig.audit_on==0">
      <view class="uo_box">
        <view class="user">{{common.auditConfig.user_teacher}}</view>
      </view>

      <view class="uso_box">
        <view class="ub_box" @tap="$xyfun.to('/pages/teacher/order')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/takeorders.png')"></image>
          <view class="ub_tit">接单列表</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/job/my_accept_job?status=1')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/collection.png')"></image>
          <view class="ub_tit">急招接单</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/news/detail?id=22')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/contract.png')"></image>
          <view class="ub_tit">我的合同</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/teacher/apply')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/information.png')"></image>
          <view class="ub_tit">我的资料</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/student')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/student.png')"></image>
          <view class="ub_tit">我的学生</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/news/detail?id=24')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/handbook.png')"></image>
          <view class="ub_tit">家教手册</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/teacher/refund_reson')" v-if="userinfo.refund_history>0">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/refund.png')"></image>
          <view class="ub_tit">审核驳回</view>
        </view>
        <view class="ub_box" @tap="sign_out" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/sign_out.png')"></image>
          <view class="ub_tit">注销</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/teacher/apply')" v-if="!userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/handbook.png')"></image>
          <view class="ub_tit">申请入驻</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/balance')" v-if="userinfo.is_teacher">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/earnings.png')"></image>
          <view class="ub_tit">我的余额</view>
        </view>
      </view>
    </view>

    <view class="usercenter_box" style="margin-top: 20rpx;" v-if="common.auditConfig.audit_on==0">
      <view class="uo_box">
        <view class="user">{{common.auditConfig.user_share}}</view>
      </view>

      <view class="uso_box" style="justify-content: space-between;padding: 0 40rpx;">
        <view class="ub_box" @tap="$xyfun.to('/pages/user/distribution/team')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/team.png')"></image>
          <view class="ub_tit">我的团队</view>
        </view>
        <view class="ub_box" @tap="showShareCode()">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/invite.png')"></image>
          <view class="ub_tit">我的邀请</view>
        </view>
        <view class="ub_box" @tap="$xyfun.to('/pages/user/distribution')">
          <image class="ub_image" mode="widthFix" :src="$xyfun.image('/static/personalcenter/earnings.png')"></image>
          <view class="ub_tit">我的收益</view>
        </view>
      </view>
    </view>

    <view class="detail_box">
      <view class="db_box" @tap="$xyfun.to('/pages/news/detail?id=21')" v-if="common.auditConfig.audit_on==0">
        <image class="db_image" :src="$xyfun.image('/static/personalcenter/advise.png')"></image>
        <view class="db_feedback">收费说明和参考价格<text class="yz-iconfont yz-jiantou"></text></view>
      </view >
      <view class="db_box">
        <image class="db_image" :src="$xyfun.image('/static/personalcenter/concern.png')"></image>
        <view class="db_feedback">关注公众号<text class="yz-iconfont yz-jiantou"></text></view>
      </view >
      <view class="db_box" @tap="$xyfun.to('/pages/user/feedback')">
        <image class="db_image" :src="$xyfun.image('/static/personalcenter/opinion.png')"></image>
        <view class="db_feedback">意见反馈<text class="yz-iconfont yz-jiantou"></text></view>
      </view >
      <view class="db_box" @tap="logout" v-if="user.isLogin">
        <image class="db_image" :src="$xyfun.image('/static/personalcenter/quit.png')"></image>
        <view class="db_feedback">退出账号<text class="yz-iconfont yz-jiantou"></text></view>
      </view >
    </view>



    <notice ref="notice" v-if="user && user.isLogin"></notice>
    <xy-tabbar />
    <!--分享组件 -->
    <xy-share ref="xyShare" v-model="showShare" posterType="user" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyTabbar from "@/components/xy-tabbar/index.vue";
import xyShare from "@/components/xy-share/index.vue";
import notice from "@/components/xy-user/notice.vue";

export default {
  components: {xyTabbar,xyShare,notice},
  data() {
    return {
      userinfo: '',
      isLoading: true,
      showShare:false,
      paddingTop: 100,
    };
  },
  computed: {
    ...mapState(['common','user'])
  },

  async onLoad() {
    this.paddingTop = this.$xyfun.xysys().top * 2;
    if(this.user.isLogin){
      this.loadData();
    }else{
      this.isLoading = false;
    }
  },
  async onShow(){
    if(this.user.isLogin) {
      this.loadData();
      if(this.user && this.user.isLogin && this.$refs.notice){
        this.$refs.notice.loadNotice();
      }
    }

  },

  methods: {
    async loadData() {
      var that = this;
      this.$api.get({
        url: '/user/user_center',
        loadingTip: '加载中...',
        success: res => {
          this.userinfo = res;
          this.isLoading = false;
        }
      })
    },
    logout(){
      this.$api.post({
        url: '/user/logout',
        success: () => {
          this.$store.dispatch('user/logout');
          this.$xyfun.msg('退出成功');
          this.$xyfun.to('/pages/index',true);
        }
      });
    },
    toMy(){
      if(this.userinfo.is_teacher){
        this.$xyfun.to('/pages/teacher/apply')
      }else{
        this.$xyfun.to('/pages/user/info')
      }

    },
    //显示分享二维码
    showShareCode(){
      this.showShare = true;
    },

    //注销教师
    sign_out(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: '是否注销您的教师身份',
        cancelText: '取消',
        confirmText: '确认注销',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'teacher/teacher_sign_out',
              data: {

              },
              success: res => {
                that.loadData();
              }
            })
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.container{
  background-size: 100%;
  //background: none !important;
}
.personalcenter{
  padding-top: 100rpx;
  .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .page_tit{
      font-size: 40rpx;
      font-weight: bold;
    }
    text{
      padding-top: 10rpx;
      font-size: 40rpx;
      color: #000;
    }
  }
  .individual_box{
    margin: 40rpx 30rpx 30rpx 40rpx;
    display: flex;
    align-items: center;
    image{
      background-color: #fff;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .ib_box{
      padding-top: 16rpx;
      .name{
        font-size: 35rpx;
        font-weight: bold;
      }
      .mobile{
        font-size: 22rpx;
      }
      .view{
        font-size: 20rpx;
        color: #a8a8a8;
        margin-top: 5rpx;
        text{
          margin-left: 20rpx;
        }
      }
    }
  }
}

.member_box{
  margin: 20rpx 30rpx 0 30rpx;
  width: calc(100% - 60rpx);
}

.usercenter_box{
  background-color: #fff;
  margin: 40rpx 30rpx 0 30rpx;
  padding-bottom: 14rpx;
  border-radius: 15rpx;
  .uo_box{
    overflow: hidden;
    .user{
      margin: 30rpx 20rpx 20rpx 20rpx;
      font-size: 32rpx;
    }
  }
  .uso_box{
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    margin-top: 16rpx;
    .ub_box{
      width: 25%;
      margin-bottom: 10rpx;
      .ub_image{
        width: 50rpx;
        height: 50rpx;
        text-align: center;
      }
      .ub_tit{
        margin-bottom: 30rpx;
        font-size: 22rpx;
        font-weight: bold;
        margin-top: 14rpx;
      }
    }
  }
}

.detail_box{
  background-color: #fff;
  margin: 25rpx 30rpx 20rpx 30rpx;
  padding: 4rpx 0;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .db_box{
    display: flex;
    width: 100%;
    .db_image{
      width: 32rpx;
      height: 32rpx;
      margin: 25rpx 4rpx 20rpx 25rpx;
    }
    .db_feedback{
      width: 1rpx;
      flex-grow: 1;
      margin: 20rpx 20rpx;
      font-weight: bold;
      font-size: 30rpx;
      text{
        float: right;
        color: #9b9999;
        margin-right: 10rpx;
        margin-top: 10rpx;
        font-size: 20rpx;
      }
    }
  }

}


</style>
